\<template>
    <view class="smart-page">
        <!--页面标题头begin-->
        <view class="smart-page-head">
            <view class="smart-page-head-title">checkbox多选框</view>
        </view>
        <!--页面标题头end-->
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">默认样式</view>
            <view>
                <checkbox-group>
                    <label>
                        <checkbox value="cb1" checked="true" />选中
                    </label>
                    <label>
                        <checkbox value="cb2" />未选中
                    </label>
                </checkbox-group>
            </view>
            <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
            <view>
                <checkbox-group>
                    <label>
                        <checkbox value="cb1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
                    </label>
                    <label>
                        <checkbox value="cb2" color="#FFCC33" style="transform:scale(0.7)" />未选中
                    </label>
                </checkbox-group>
            </view>
        </view>

        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                推荐展示样式
                <text>使用 uni-list 布局</text>
            </view>
        </view>

        <view class="uni-list">
            <checkbox-group @change="checkboxChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
                    <view>
                        <checkbox :value="item.value" :checked="item.checked" />
                    </view>
                    <view>{{item.name}}</view>
                </label>
            </checkbox-group>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: 'checkbox 复选框',
            items: [{
                value: 'USA',
                name: '美国'
            },
            {
                value: 'CHN',
                name: '中国',
                checked: true
            },
            {
                value: 'BRA',
                name: '巴西'
            },
            {
                value: 'JPN',
                name: '日本'
            },
            {
                value: 'ENG',
                name: '英国'
            },
            {
                value: 'FRA',
                name: '法国'
            }]
        }
    },
    methods: {
        checkboxChange: function (e) {
            var items = this.items,
            values = e.detail.value;
            for (var i = 0, lenI = items.length; i < lenI; ++i) {
                const item = items[i]
                if(values.indexOf(item.value) >= 0){
                    this.$set(item,'checked',true)
                }else{
                    this.$set(item,'checked',false)
                }
            }
        }
    }
}
</script>
<style>
.uni-list-cell {
	justify-content: flex-start
}
</style>


